<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <!-- 左侧 -->
          <div class="tips">
            <i class="el-icon-info" />
            <span>总记录数:{{ total }}</span>
          </div>
        </template>
        <template #right>
          <!-- 右侧 -->
          <el-button
            type="warning"
            size="small"
            @click="$router.push('/import')"
          >excel导入</el-button>
          <el-button type="danger" size="small" @click="exportExcel">excel导出</el-button>
          <el-button

            type="primary"
            size="small"
            @click="addEmployess"
          >新增员工</el-button>
        </template>
        <page-tools />
      </page-tools>
      <el-card style="margin-top: 10px">
        <!-- 表格 -->
        <el-table :data="list">
          <el-table-column label="序号" type="index" :index="indexMethod" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像">
            <template #default="{row}">
              <el-image
                style="width: 100px; height: 100px; border-radius: 50%;"
                :src="row.staffPhoto"
              >
                <template #placeholder>
                  <img style="width: 100px; height: 100px; border-radius: 50%;" src="@/assets/图片加载/加载中.gif" alt="">
                </template>

                <template #error>
                  <img style="width: 100px; height: 100px; border-radius: 50%;" src="@/assets/图片加载/加载失败1.jpg" alt="">
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template #default="{ row }">
              {{ formatFormOfEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" width="180">
            <template #default="{ row }">
              {{ formatTime(row.correctionTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="detail(row.id)">查看</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">分配角色</el-button>
              <el-button
                type="text"
                size="small"
                @click="delEmployess(row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器-->
        <el-pagination
          :total="total"
          :page-size="params.size"
          layout="prev, pager, next"
          background
          @current-change="currentChange"
        />
        <!-- 弹框 -->
        <add-employee
          :show-dialog="showDialog"
          @close-dialog="closeDialog"
          @get-employeeList="getEmployeeList"
        />
        <!-- 分配角色 -->
        <assign-role :show-role-dialog="showRoleDialog" :cur-id="curId" @close-assign-dialog="closeAssignDialog" />
      </el-card>
    </div>
  </div>
</template>

<script>
import AddEmployee from '@/views/employees/component/add-employee.vue'
import dayjs from 'dayjs'
import { getEmployeeListApi, delEmployeeApi } from '@/api'
// 导入处理数据的方法
import { getExportData } from '@/utils/excel'
// 导入组件
import AssignRole from './component/assign-role.vue'
export default {
  name: 'Employment',
  components: {
    AddEmployee,
    AssignRole
  },
  data () {
    return {
      list: [],
      // 获取员工列表的查询参数
      params: {
        page: 1,
        size: 5
      },
      total: 0,
      // 弹框组件
      showDialog: false,
      // 分配角色组件显隐
      showRoleDialog: false,
      curId: ''
    }
  },
  mounted () {
    this.getEmployeeList()
  },
  methods: {
    // 获取员工信息
    async getEmployeeList () {
      const res = await getEmployeeListApi(this.params)
      // console.log(res)
      this.list = res.data.rows
      this.total = res.data.total
    },
    // 格式化员工聘用
    formatFormOfEmployment (value) {
      // 使用枚举 通常少量的固定的可以使用 大量的变化必须接口来做
      const TYPES = {
        1: '正式员工',
        2: '非正式员工',
        4: '临时工'
      }
      return TYPES[value]
    },
    // 格式化时间
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    // 分页器事件
    currentChange (page) {
      this.params.page = page
      this.getEmployeeList()
    },
    // 删除员工
    async delEmployess (row) {
      try {
        await this.$confirm(`确定要删除${row.username}这个员工吗?`, '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const res = await delEmployeeApi(row.id)
        this.$message.success(res.message)
        // 如果删除的表格的最后一项 当前页码减1
        if (this.list.length === 1) {
          this.params.page--
        }
        this.getEmployeeList()
      } catch (error) {
        console.log(error)
      }
    },
    // 点击打开弹框
    addEmployess () {
      this.showDialog = true
    },
    // 关闭弹框
    closeDialog () {
      this.showDialog = false
    },
    // 表格序号索引
    indexMethod (index) {
      return index + (this.params.page - 1) * (this.params.size) + 1
    },
    // excel导出
    exportExcel() {
      import('@/vendor/Export2Excel').then(async excel => {
        // console.log(excel)
        // 调接口使用后台返回的数据
        const res = await getEmployeeListApi(this.params)
        // console.log(res.data.rows)
        // 枚举
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        } // 处理数据的方法
        const { data } = getExportData(res.data.rows, headerRelation)
        // console.log(data)
        excel.export_json_to_excel({
          header: Object.keys(headerRelation), // 表头必填 要求是一个数组
          data: data, // 表格数据body 要求是一个二维数组
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx'// 生成的文件类型
        })
      })
    },
    // 查看详情
    detail(id) {
      this.$router.push({
        path: '/detail',
        query: { id }
      })
    },
    assignRole(id) {
      this.curId = id
      this.showRoleDialog = true
    },
    closeAssignDialog() {
      this.showRoleDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
